<template>
  <div class="bodybg">
    <div style="margin-top: 40px;">
      <el-row>
        <el-col :span="4"></el-col>
        <el-col :span="8">
          <el-card class="box-card" style="text-align: center; background-color: #ecd5dc; height: 500px">
            <div style="margin-top: 100px;">
              <font style="font-size: 30px; color: white">WELCOME</font>
            </div>
            <div style="margin-top: 20px;">
              <font style="font-size: 20px; color: white">JOIN US</font>
            </div>
            <div style="margin-top: 20px;">
              <el-avatar :size="150" :src="appObject.imgSrc" />
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" style="text-align: center; background-color: #c9e0ed; height: 500px">
            <div style="margin-top: 150px;">
              <font style="font-size: 30px; color: white">登录</font>
            </div>
            <el-form :model="appObject.form" label-width="120px" style="margin-top: 20px;" ref="formRef" :rules="rules">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="appObject.form.name" style="opacity: 0.5" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="appObject.form.password" style="opacity: 0.5" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button style="width: 100%" type="primary" @click="submitForm(formRef)">登录</el-button>
              </el-form-item>
              <el-form-item>
                <el-link :underline="false" type="primary" @click="routeDispatch('/register')">
                  没有账号，点击注册
                </el-link>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="4"></el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import userStore from '../store/user.js'
  import { storeToRefs } from 'pinia'
  import imgUrl from '../assets/img/waoku.jpg'
  import {routeDispatch} from '../http/utils.js'
  import { loginUser } from '../http/userApi.js'
  
  const appObject = reactive({
    form: {
      name: '',
      password: ''
    },
    imgSrc: imgUrl 
  })
  
  // 表单校验
  const rules = reactive({
    name: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
    ]
  })
  
  // 提交注册
  const formRef = ref()
  const submitForm = (formEL) => {
    if (!formEL) return
    formEL.validate((valid) => {
      if (valid) {
       loginUser(appObject.form).then(res => {
         res = res.data
         ElMessage({
           message: res.code == 200 ? "登录成功" : res.msg,
           type: res.code == 200 ? "success" : "error"
         })
         if(res.code == 200) {
           // 设置state中的user信息，并保存token
           const uStore = userStore()
           uStore.updateUser(res.data)
           // window.localStorage.setItem('wg_token', res.data.token)
           window.localStorage.setItem('wg_user', JSON.stringify(uStore.$state.user))
           // 跳转到首页
           console.log("登陆成功，跳转去首页")
           routeDispatch("/")
         }
       })
      }else{
        return false
      }
    })
  }
  
  // import httpUtil from '../http/index.js'
  // httpUtil("/test").then(res => {
  //   console.log("flask helloworld", res)
  // })
</script>

<style scoped>

</style>
